<template>
  <view class="container">
    <TopBtn :title="'会诊单'"></TopBtn>
    <view class="mt_30"></view>
    <view class="currency_card">
      <view class="currency_info">
        <view class="Card">
          <image :src="data.patientAvatar" mode=""></image>
          <view class="">
            <view class="doctorName">
              {{ data.patientName }}
              <text>{{ data.patientSex == 1 ? '男' : '女' }}</text>
            </view>
            <view class="IdCard">{{ data.patientAge || data.age }}岁</view>
          </view>
        </view>
        <view class="Card_row">
          <view class="title">简要病史：</view>
        </view>
        <view class="greyBg">
          {{ data.briefMedical }}
        </view>
      </view>
    </view>
    <view class="info">
      <!-- <view class="currency_title">
				会诊单
			</view> -->
      <view
        class="currency_card"
        v-for="(n, i) in data.consultationDocumentRespVOS"
        @click="goInfo('pages/ConsultationRoom/consultationDetails/consultationDetails', n.id)"
      >
        <view class="currency_info">
          <view class="Card_row alignItems">
            <view class="title">会诊意见：</view>
            <view class="text">
              {{ n.opinion }}
            </view>
          </view>
          <view class="Card_row alignItems">
            <view class="title">问诊医生：</view>
            <view class="text">
              <doctorCard :data="n"></doctorCard>
            </view>
          </view>
          <view class="Card_row">
            <view class="title">提交时间：</view>
            <view class="text flex-center">
              <uni-dateformat :date="n.createTime" format="yyyy-MM-dd hh:mm"></uni-dateformat>
            </view>
          </view>
          <view class="xian" v-if="n.status == 4"></view>
        </view>
      </view>
    </view>
    <view class="" v-if="data.upData != 1 && data.doctorId != userId">
      <view class="currency_card">
        <view class="currency_title mb_30">会诊建议</view>
        <view class="currency_info">
          <textArea
            v-model="baseFormData.opinion"
            placeholder="请输入会诊意见"
            :inputNane="baseFormData.opinion"
            class="mb_30"
            :maxNum="500"
          ></textArea>
          <view class="Card_row alignItems">
            <view class="title">问诊医生：</view>
            <view class="text"></view>
          </view>
        </view>
      </view>
      <view class="btn flex-center-center" @click="createConsultationDocument()">发布</view>
    </view>
    <view class="" v-if="data.doctorId == userId">
      <view class="currency_card">
        <view class="currency_title mb_30">会诊结论</view>
        <view class="currency_info">
          <textArea
            v-model="FormData.conclusion"
            placeholder="请输入会诊结论"
            :inputNane="FormData.conclusion"
            class="mb_30"
            :maxNum="500"
          ></textArea>
          <view class="Card_row alignItems">
            <view class="title">问诊医生：</view>
            <view class="text">
              <view class="myinfo flex-center">
                <image :src="data.loginAvatar" mode=""></image>
                {{ data.loginName }}
                <view class="">{{ data.loginTitleName }} | {{ data.loginDepartName }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="btn flex-center-center" @click="updateConsultationInfo()">发布</view>
    </view>
  </view>
</template>

<script>
import { SendGroupMessage } from '@/utils/TIM'
import {
  getConsultationInfo,
  createConsultationDocument,
  updateConsultationInfo,
} from '@/api/ConsultationRoom'
import messageIcon from '@/TUIWidget/static/message-custom/prescription.png'

export default {
  data() {
    return {
      data: {},
      baseFormData: {
        opinion: '',
      },
      FormData: {
        conclusion: '',
      },
      userId: uni.getStorageSync('userId'),
    }
  },
  onLoad(e) {
    this.id = e.id
    this.getConsultationInfo()
  },
  methods: {
    updateConsultationInfo() {
      if (!this.FormData.conclusion) {
        uni.showToast({
          title: '请填写会诊结论',
          duration: 2000,
          icon: 'none',
          mask: true,
        })
        return
      }
      this.FormData.id = this.id
      updateConsultationInfo(this.FormData).then(res => {
        uni.showToast({
          title: '操作成功',
          duration: 2000,
          icon: 'none',
          mask: true,
        })
        this.getConsultationInfo()

        // 发送群消息
        const message = {
          businessID: 'tip',
          type: 'card',
          icon: messageIcon,
          title: '会诊结论',
          text: this.FormData.conclusion,
          buttonText: '去查看',
          buttonUrl: `/pages/ConsultationRoom/ConsultationForm/ConsultationForm?id=${this.id}`,
        }
        SendGroupMessage(this.data.groupId, message)

        uni.navigateBack({
          delta: 1, //返回层数，2则上上页
        })
      })
    },
    createConsultationDocument() {
      if (!this.baseFormData.opinion) {
        uni.showToast({
          title: '请填写会诊建议',
          duration: 2000,
          icon: 'none',
        })
        return
      }
      this.baseFormData.consultationId = this.id
      createConsultationDocument(this.baseFormData).then(res => {
        uni.showToast({
          title: '操作成功',
          duration: 2000,
          icon: 'none',
          mask: true,
        })

        // 获取会话信息
        this.getConsultationInfo()

        // 发送群消息
        const { doctorName } = uni.getStorageSync('userInfo')
        const message = {
          businessID: 'tip',
          type: 'highlight', // default | highlight | card | topbar |
          text: `${doctorName}医生已提交会诊意见，请发起医生处理`,
        }
        SendGroupMessage(this.data.groupId, message)

        uni.navigateBack({
          delta: 1, //返回层数，2则上上页
        })
      })
    },
    getConsultationInfo() {
      getConsultationInfo({
        id: this.id,
      }).then(res => {
        this.data = res.data
      })
    },
  },
}
</script>

<style lang="less" scoped>
.myinfo {
  image {
    width: 80rpx;
    height: 80rpx;
    margin-right: 28rpx;
  }

  font-weight: bold;
  font-size: 32rpx;
  color: #333333;

  view {
    font-weight: 500;
    font-size: 24rpx;
    color: #666666;
    margin-left: 20rpx;
  }
}

.btn {
  width: 649rpx;
  height: 100rpx;
  background: #3b6cfe;
  border-radius: 50rpx;
  font-weight: 500;
  font-size: 28rpx;
  color: #ffffff;
  margin: 50rpx auto;
}

.Card {
  display: flex;
  align-items: center;
  padding: 10rpx 20rpx;

  .doctorName {
    font-weight: bold;
    font-size: 32rpx;
    color: #333333;

    text {
      margin-left: 19rpx;
      font-size: 24rpx;
      color: #333;
      font-weight: normal;
    }
  }

  .IdCard {
    margin-top: 9rpx;

    text {
      display: inline-block;
      background: #def7ed;
      padding: 5rpx 10rpx;
      border-radius: 10rpx;
      color: #23cc88;
      margin-right: 10rpx;
    }

    font-size: 24rpx;
    color: #666666;
  }

  image {
    width: 90rpx;
    height: 90rpx;
    margin-right: 33rpx;
    border-radius: 50%;
  }
}

.greyBg {
  width: 649rpx;
  min-height: 72rpx;
  background: #fafafa;
  border-radius: 10rpx;
  font-weight: 500;
  font-size: 28rpx;
  color: #333333;
  padding: 29rpx 16rpx;
  box-sizing: border-box;
}

.currency_card {
  margin: auto;
}

.currency_info {
  margin-top: 21rpx;

  &:last-child {
    margin-top: 0rpx;
  }

  .Card_row {
    display: flex;
    font-weight: 500;
    font-size: 28rpx;
    color: #333;
    align-items: center;
    min-height: 50rpx;

    .title {
      width: 150rpx;
      color: #999;
    }

    .title2 {
      width: 300rpx;
      color: #999;
    }
  }
}

.info {
  padding: 30rpx 30rpx 0;

  .currency_card {
    position: relative;

    .state {
      position: absolute;
      right: 0;
      top: 0;
      padding: 0 5rpx;
      min-width: 100rpx;
      height: 50rpx;
      background: #f9fbfe;
      font-size: 28rpx;
      color: #3e6efe;
      text-align: center;
      line-height: 50rpx;
      border-radius: 0 21rpx;
    }
  }

  & > view {
    margin-bottom: 27rpx;
  }

  .currency_info {
    margin-top: 21rpx;

    &:last-child {
      margin-top: 0rpx;
    }

    .Card_row {
      display: flex;
      font-weight: 500;
      font-size: 28rpx;
      color: #333;
      align-items: center;
      margin-bottom: 20rpx;

      .title {
        width: 150rpx;
        color: #999;
      }

      .time {
        flex: 1;
        color: #999;
      }

      .text {
        flex: 1;
      }
    }

    .alignItems {
      align-items: self-start;
    }
  }
}
</style>
